<template>
	<view class="common-text-size">
		<view class="info">
			<view class="form">
				<text>手机号：</text><input type="text" placeholder="手机号" v-model="form.username" />
			</view>
			<view class="form">
				<text>密码：</text><input type="password" placeholder="密码" v-model="form.password" />
			</view>
			<view class="form">
				<text>验证码：</text>
				<view class="form-code">
					<input style="width: calc(30vw);" type="text" v-model="form.code" placeholder="验证码" />
					<image :src="'data:image/png;base64,'+code" @click="getImage"></image>
				</view>
			</view>
		</view>
		<view class="opt">
			<button @click="onLogin">
				登录
			</button>
		</view>
		<view class="bottom-opt text-blue item-between common-width96 ml-2 mt-2">
			<text @click="toHome">返回首页</text>
			<text @click="toRegister">注册</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					password: "",
					code: "",
					uuid: ""
				},
				code: ""
			}
		},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: "../register/register"
				})
			},
			toHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			onLogin() {
				let _this = this;
				uni.showLoading({
					title: "登陆中"
				});
				uni.request({
					url: 'http://zs.91gongju.cn:10003/login',
					method: "POST",
					data: _this.form,
					success(response) {
						let data = response.data;
						if (data.code == 200) {
							uni.setStorage({
								key: "Admin-Token",
								data: data.token,
								complete() {
									uni.switchTab({
										url: "../../home/home"
									})
								}
							})
						} else {
							uni.showToast({
								icon: "none",
								title: data.msg
							})
							_this.getImage();
							_this.form.code = "";
						}
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			getImage() {
				let _this = this;
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: "http://zs.91gongju.cn:10003/captchaImage",
					success(response) {
						let data = response.data;
						if (data.code == 200) {
							_this.form.uuid = data.uuid;
							_this.code = data.img;
						} else {
							uni.showToast({
								title: "网络错误",
								icon: "none"
							})
						}
					},
					complete() {
						uni.hideLoading();
					}
				})
			}
		},
		onLoad() {
			this.getImage();
		}
	}
</script>

<style>
	@import url("/static/css/common.css");
	.opt {
		width: calc(90vw);
		margin: calc(8vh) calc(3vw) calc(2vh) calc(3vw);
	}

	.opt button {}

	.form {
		width: calc(90vw);
		height: calc(8vh);
		margin: calc(2vh) calc(3vw) calc(2vh) calc(3vw);
		display: flex;
		justify-content: space-between;
		line-height: calc(5vh);
	}

	.form image {
		width: calc(30vw);
		height: calc(5vh);
		padding-left: calc(5vw);
	}

	.form-code {
		display: inline-flex;
		width: calc(67vw);
	}

	input {
		border: 1px solid #808080;
		border-radius: calc(5vw);
		padding-left: calc(2vw);
		height: calc(5vh);
		width: calc(65vw);
	}
</style>
